<template>
  <div class="set-tools-layout ver-layout">
    <el-card>
      <el-form
        ref="projectFormRef"
        class="tools-form-view"
        :model="pageData.toolsForm"
        :rules="pageData.toolsFormRule"
        label-position="left"
        size="small"
        inline
      >
        <el-form-item
          class="form-item-second-view"
          label="开发工具选择"
          required
          prop="toolsName"
          size="small"
        >
          <el-radio-group v-model="pageData.toolsForm.toolsName" size="mini">
            <el-radio size="small" label="webstorm">webstorm</el-radio>
            <el-radio size="small" label="vscode">vscode</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button size="small" type="primary" @click="saveToolsData">保存</el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts">
//页面数据
import { onMounted, reactive, ref } from 'vue'
import { managePlugin } from '../../../plugins/managePlugin'
import { showToast } from '../../../utils/utils'
import { appStore } from "../../../store/app";
const appStoreObj = appStore()
const projectFormRef = ref<null>()

const pageData = reactive({
  toolsFormRule: {
    toolsName: [
      {
        required: true,
        message: '请选择开发工具'
      }
    ]
  },
  toolsForm: {
    toolsName: ''
  }
})

const saveToolsData = async () => {
  projectFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      let toolsName = pageData.toolsForm.toolsName
      await managePlugin.saveDevToolsRender(toolsName)
      appStoreObj.setToolsName(toolsName)
      await showToast('保存成功！')
    }
  })
}

onMounted(async () => {
  let toolsName = await managePlugin.getDevToolsRender()
  console.log('toolsName==', toolsName)
  pageData.toolsForm.toolsName = toolsName || ''
})
</script>

<style scoped lang="less">
.set-tools-layout {
  margin-left: 10px;
  height: 70vh;

  .tools-form-view {
    width: 100%;

    .form-item-second-view {
      width: 30%;
    }
  }
}
</style>
